---
layout: page.hbs
---

{{> sidebar-examples }}

<div class="example-content">
<div class="wrap">
  <h1>{{ title }}</h1>
  <p>{{{ description }}}</p>
</div>
<div id="map-wrapper">
  {{> body }}
</div>
{{#markdown}}
```xml
<html>
<head>
  <meta charset=utf-8 />
  <title>{{page.data.title}}</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  {{#if page.data.legacyLeaflet}}
    <!-- Load Leaflet (not latest version due to dependencies) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@{{page.data.legacyLeaflet}}/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@{{page.data.legacyLeaflet}}/dist/leaflet-src.js"></script>
  {{else}}
    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@{{siteData.latest_leaflet}}/dist/leaflet.css"
    integrity="{{siteData.latest_leaflet_css_integrity}}"
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@{{siteData.latest_leaflet}}/dist/leaflet.js"
    integrity="{{siteData.latest_leaflet_integrity}}"
    crossorigin=""></script>
  {{/if}}
  {{#if page.data.legacyEsriLeaflet}}
    <!-- Load Esri Leaflet (not latest version due to dependencies) -->
    <script src="https://unpkg.com/esri-leaflet@{{page.data.legacyEsriLeaflet}}/dist/esri-leaflet.js"></script>
  {{else}}
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@{{siteData.latest_esri_leaflet}}/dist/esri-leaflet.js"
    integrity="{{siteData.latest_esri_leaflet_integrity}}"
    crossorigin=""></script>
  {{/if}}
  {{#if page.data.geocoder}}
  <!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@{{siteData.latest_esri_leaflet_geocoder}}/dist/esri-leaflet-geocoder.css"
    integrity="{{siteData.latest_esri_leaflet_geocoder_css_integrity}}"
    crossorigin="">
  <script src="https://unpkg.com/esri-leaflet-geocoder@{{siteData.latest_esri_leaflet_geocoder}}/dist/esri-leaflet-geocoder.js"
    integrity="{{siteData.latest_esri_leaflet_geocoder_integrity}}"
    crossorigin=""></script>
  {{/if}}
  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

{{#each this.pages}}{{#if isCurrentPage}}{{{trim page}}}{{/if}}{{/each}}

</body>
</html>
```
{{/markdown}}
<div class="wrap">
  <p><a href="http://github.com/Esri/esri-leaflet-doc/edit/master/{{page.src}}">Edit this sample on GitHub</a></p>
</div>

<div class="mobile-menu">
  {{> sidebar-examples }}
</div>

</div>
